let bannerBox = document.getElementById('banner-box');
let goTop = document.getElementById('goTop');
let allShop = document.getElementById('allshop');
let bannerContainer = document.getElementById('banner-container');
let now = 0;
let timer = null;
let btnCl = document.getElementById('reg')
let ntime = document.querySelector('.time strong')
let hour = document.querySelector('.time .hour')
let min = document.querySelector('.time .minute')
let sec = document.querySelector('.time .second')
let isul = document.querySelector('.isul')
let mycontent = document.querySelector('.mycontent')
let logo = document.querySelector('.logo')
let addgood = document.querySelector('.btn-brank-one')
let buyGood = document.querySelector('.btn-brank-two')
let btnBox = document.querySelectorAll('.btn-box')
let spanShow = document.querySelector('.span-icon')
class Cart {
    constructor() {
        this.getGoods()
        this.numw=0
        this.allCheckC = document.querySelectorAll('.all-chick')
        this.oneCheckC = document.querySelectorAll('.one-chick')
        this.allCheckC[0].onclick = this.allCheck.bind(this, 1)
        this.allCheckC[1].onclick = this.allCheck.bind(this, 0)
        this.oneCheck()
        document.querySelector('.ww').onclick = this.clickOver.bind(this)
        // this.priceZj()
    }
    //判断鼠标点击事件
    clickOver(e) {
        if (e.target.id == 'add') {
            // console.log('add');
            this.addNum(e.target)
        }
        if (e.target.id == 'del') {
            console.log('delete');
            this.deleteCart(e.target)
        }
        if (e.target.id == 'reduce') {
            // console.log(e.target);
            this.reduceNum(e.target)
        }
    }
    //+增加数量
    addNum(sc) {
        let numObj = sc.previousElementSibling;
        let num = numObj.innerHTML
        num++
        numObj.innerHTML = num - 0
        // console.log(num);
        this.priceXj(sc, num)
    }
    //-减少数量
    reduceNum(sc) {
        let numObj = sc.nextElementSibling;
        let num = numObj.innerHTML
        if (num == 0) {
            numObj.innerHTML = 0
            this.priceXj(sc, num)
        } else {
            num--
            numObj.innerHTML = num - 0
            this.priceXj(sc, num)
        }

    }
    //全选
    allCheck(index, e) {
        // console.log(e.target);
        let offOn = e.target.checked
        console.log(offOn);
        this.oneCheckC.forEach((v, i) => {
            this.oneCheckC[i].checked = offOn
        })
        this.allCheckC[index].checked = offOn;
        this.priceZj()
    }
    //单选
    oneCheck(e) {
        let num = 0
        let that = this
        let length = this.oneCheckC.length
        this.oneCheckC.forEach((v, i) => {
            v.checked && num++
            v.onclick = function (e) {
                if (this.checked) {
                    num++
                } else {
                    num--
                }
                // console.log(num);
                that.allCheckC[0].checked = (num == length)
                that.allCheckC[1].checked = (num == length)
                //G
                that.priceZj()
            }


        })

    }
    //计算小计
    priceXj(sc, num) {
        let numPrice = sc.parentNode.previousElementSibling.innerHTML;
        console.log(numPrice);
        // let price=numPrice/num
        sc.parentNode.nextElementSibling.innerHTML = (num - 0) * numPrice;
        let goodsId = sc.parentNode.parentNode.getAttribute('goods-id')
        console.log(goodsId);
        this.local(goodsId, num)

    }
    //更新历史记录
    local(id, num = '') {
        let gds = localStorage.getItem('cart')
        if (!gds) return
        gds = JSON.parse(gds)
        gds.forEach((good, i) => {
            if (good.id == id) {
                if (num) {
                    good.num = num
                } else {
                    gds.splice(i, 1)
                }
            }
        })
        localStorage.setItem('cart', JSON.stringify(gds))
    }
    //总计
    priceZj() {
        let trObj = document.getElementsByClassName('one-chick')
        let price = 0
        let num=0
        Array.from(trObj).forEach(v => {
            if (v.checked) {
                let vObj = v.parentNode.parentNode;
                // console.log(goodsTrObj);
                let num1 = vObj.querySelector('.num-num').innerHTML - 0;
                let price1 = vObj.querySelector('.list-total').innerHTML - 0;
                //  console.log(num, subT);
                 num+= num1;
                price += price1;
            }
        })
        document.getElementById('sum-num').innerHTML = num
        document.getElementById('sum-price').innerHTML = price

    }
    //删除
    deleteCart(sc) {
        let id = sc.parentNode.parentNode.getAttribute('goods-id')
        let that = this
        layer.confirm('是否删除？', {
            btn: ['确定', '取消']
        }, function (index) {
            layer.close(index);
            sc.parentNode.parentNode.remove();
            that.priceZj()
            that.local(id);
            location.reload()


        });
    }
    //显示数据
    getGoods() {
        let html = '';
        let carts = localStorage.getItem('cart')
        JSON.parse(carts).forEach(data => {
            html += `<div class="cart-con clearfix" goods-id=${data.id}>
        <div class="select"> <input type="checkbox" name="one-chick" class="one-chick" ></div>
        <div class="image"><img
                src="${data.src}"
                alt=""></div>
        <div class="list-name">
            <p>${data.tips}</p>
        </div>
        <div class="list-price">${data.price}</div>
        <div  style="float: left;display: flex; width: 260px;margin-top: 50px;">
            <div class="goods-div" id="reduce">-</div>
            <div class="num-num" style="border-top: 1px solid #b3b3b3;
            border-bottom: 1px solid #b3b3b3;
            float: left;
            height: 30px;
            line-height: 30px;width: 72px;
            text-align:center
        ">${data.num}</div>
            <div class="goods-div" id="add">+</div>
        </div>
        <div class="list-total">${data.price * data.num}</div>
        <div class="del" >
            <svg id='del' fill="#ccc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
                <path
                    d="M32.5.68,18,15.17,3.5.68A2,2,0,0,0,.68,3.5L15.17,18,.68,32.5A2,2,0,0,0,3.5,35.32L18,20.83,32.5,35.32a2,2,0,0,0,2.82-2.82L20.83,18,35.32,3.5A2,2,0,0,0,32.5.68Z">
                </path>
            </svg>
        </div>
        
    </div>`;
        })
        // console.log(html);
        document.querySelector('.goods-list').innerHTML = html
        // this.m('table tbody').innerHTML=html

    }

}
logo.onclick = function () {
    window.location.href = 'http://127.0.0.1:5500/xiaomiyoupin/index.html'
}


function changeColor(tag) {
    tag.style.color = '#fff'
    tag.style.backgroundColor = "rgba(132,95,63)"
}

let speed = 180;
let speedTimer = setInterval(function () {
    speed -= 5;
    if (speed <= 0) {
        speed = 180;
    }
}, 500);

goTop.onclick = function () {
    let scrollY = window.scrollY;
    let timer = setInterval(function () {
        scrollY -= speed;
        if (scrollY <= 0) {
            clearInterval(timer);
        }
        window.scrollTo(0, scrollY);
    }, 30);
}

let names = localStorage.getItem('已登录')
if (names) {
    let html = ''
    html = `
        <div type="button" style="color:#E7E7E7 ;position: relative;" id="reg">
            <img src="https://img.youpin.mi-img.com/shopcenter/7dhur6i77hg_11350267611625208274363.png" width=30
                alt="">
            <div>我&nbsp;<svg fill="#ccc" xmlns="http://www.w3.org/2000/svg" style="width: 12px;height:7px"
                    viewBox="0 0 40 22.5">
                    <path
                        d="M39.28.72h0a2.49,2.49,0,0,0-3.5,0L20,16.53,4.23.72A2.48,2.48,0,0,0,.72,4.23L18.24,21.78A2.48,2.48,0,0,0,20,22.5a2.52,2.52,0,0,0,1.77-.72L39.28,4.23A2.5,2.5,0,0,0,39.28.72Z">
                    </path>
                </svg>
            </div>
            <ul class="isul">
                <li class="isli">我的订单</li>
                <li>退款/售后</li>
                <li>我的资产</li>
                <li>我的收藏</li>
                <li>地址管理</li>
                <li>退出登录</li>
            </ul>
        </div>`
    document.querySelector("#mycontent").innerHTML = html
    let isul = document.querySelector('.isul')
    let mycontent = document.querySelector('.mycontent')
    mycontent.onmouseover = function () {
        isul.style.display = 'block'
    }
    isul.onmouseout = function (e) {
        isul.style.display = 'none'

    }
    let liObj = isul.children
    Array.from(liObj).forEach((v) => {
        if (v.innerHTML == '退出登录') {
            v.onclick = function () {
                console.log(1);
                localStorage.removeItem('已登录')
                location.reload()
            }
        }if (v.innerHTML == '我的订单') {
            v.onclick = function () {
                location.href='http://127.0.0.1:5500/xiaomiyoupin/user.html'
            }
        }if (v.innerHTML == '我的收藏') {
            v.onclick = function () {
                location.href='http://127.0.0.1:5500/xiaomiyoupin/collect.html'
                
            }
        }if (v.innerHTML == '我的资产') {
            v.onclick = function () {
               location.href='http://127.0.0.1:5500/xiaomiyoupin/asset.html'
            }
        }if (v.innerHTML == '地址管理') {
            v.onclick = function () {
               location.href='http://127.0.0.1:5500/xiaomiyoupin/address.html'
            }
        }
    })
    let goodsData = localStorage.getItem('cart')
    if (goodsData) {
        let htmls = ''
        htmls = `<div class="good-title">
        <input type="checkbox" name="all-chick" class="all-chick">
        <span class="all-txt">全选</span>
        <span class="product">商品信息</span>
        <span class="price">单价￥</span>
        <span class="num">数量</span>
        <span class="total">金额￥</span>
        <span class="edit">操作</span>
    </div>
    <div class="chat-info">
        <input type="checkbox" name="all-chick" class="all-chick">
        <span class="name">有品精选</span>
        <div class="mijiapost"><span><span class="postimg">!</span>满99.00元免运费</span>
        </div>
    </div>
    <div class="goods-list">
        

    </div>
    <div class="sum">
           <div class="sum-one">全选&nbsp;已选 <span id="sum-num">0</span></div>
           <div class="sum-two">总计:<span id="sum-price">0</span></div>
           <div class="sum-three">支付</div>
        </div>`
        document.querySelector('.ww').innerHTML = htmls
        goodsData = JSON.parse(goodsData)
        new Cart

    }
} else {
    document.querySelector('#goods-con .btn-wrap-a').href = "#none"
    let btnCl = document.getElementById('reg')
    btnCl.onclick = btnClFn
    document.querySelector('#goods-con .con-p').innerHTML = '登陆后才能看见购物车的商品哦'
    document.querySelector('#goods-con .btn-wrap-a').innerHTML = '去登陆'

    document.querySelector('#goods-con .btn-wrap').onclick = btnClFn
}

let cart = document.querySelector('.cart-icon')
cart.onclick = function () {
    window.location.href = 'http://127.0.0.1:5500/xiaomiyoupin/cart.html'
}
document.querySelector('#license').onclick = function () {
    window.location.href = "https://daren.xiaomiyoupin.com/ewen/pageFromId?id=gurkg3d4bh7bbe6q"
}
document.querySelector('#protocol').onclick = function () {
    window.location.href = "https://daren.xiaomiyoupin.com/ewen/pageFromId?id=ytf4mzipem9cr7fj"
}

function btnClFn() {
    layer.open({
        type: 1,
        title: false,
        closeBtn: 0,
        shadeClose: true,
        skin: '',
        btn: ['同意并继续', '不同意'],
        content: `<div class="undefined layout-horizontal-vertical"><span class="close layui-layer-close"><div style="width: 13px; height: 13px; cursor: default;"><svg fill="#ccc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path d="M32.5.68,18,15.17,3.5.68A2,2,0,0,0,.68,3.5L15.17,18,.68,32.5A2,2,0,0,0,3.5,35.32L18,20.83,32.5,35.32a2,2,0,0,0,2.82-2.82L20.83,18,35.32,3.5A2,2,0,0,0,32.5.68Z"></path></svg></div></span><div class="agreement-container"><p class="title">声明与政策</p><div class="content"><p>欢迎您来到小米有品！</p><p>我们依据最新法律法规要求，制定并更新了<a target="_blank" href="https://daren.xiaomiyoupin.com/ewen/pageFromId?id=cxsew05x0x0ch53v" rel="noopener noreferrer">《隐私政策》</a><span class="color-gold">、</span><a target="_blank" href="https://m.xiaomiyoupin.com/mr/60013c77c9e77c0001f35060" rel="noopener noreferrer">《小米有品用户协议》</a>以及<a target="_blank" href="https://m.xiaomiyoupin.com/mr/60014809cff47e0001f66ad6" rel="noopener noreferrer">《小米帐号使用协议》</a>。</p><p>您需阅读并同意相关政策条款方可进行登录。</p></div></div>`
    });
    document.querySelector('.layui-layer-btn0').href='http://127.0.0.1:5500/xiaomiyoupin/login.html'
}
//   